<template>
    <div class="my_content">
        <div class="colorFFF">
            <Tabs title="停车数据">
                <template #btn>
                    <div style="width: 10rem"></div>
                </template>
            </Tabs>
        </div>
        <div class="content">
            <div class="box_l">
                <div class="car_text">车辆进出总数</div>
                <div class="car_num">
                    <span class="car_num_l">{{ data_1['totalCount'] }}</span>
                    <span class="car_num_r">辆</span>
                </div>
                <div class="car_box">
                    <div class="car_move car_move_l">
                        <CarArrowsBar></CarArrowsBar>
                    </div>
                    <div class="car_img">
                        <img src="../assets/bottom_right_car.png" alt="">
                        <!-- <svg-icon icon-class="largeData-car-svg" /> -->
                    </div>
                    <div class="car_move car_move_r">
                        <CarArrowsBar></CarArrowsBar>
                    </div>
                </div>
            </div>
            <div class="box_r">
                <div class="r_box_item r_box_1">
                    <div class="item_text_l">长期车进入总数</div>
                    <div class="item_text_r">
                        <span class="number">{{ data_1['longUserTotalCount'] }}</span>
                        <span class="unit">辆</span>
                    </div>
                </div>
                <div class="r_box_item r_box_2">
                    <div class="item_text_l">临时车进入总数</div>
                    <div class="item_text_r">
                        <span class="number">{{ data_1['tempUserTotalCount'] }}</span>
                        <span class="unit">辆</span>
                    </div>
                </div>
                <div class="r_box_item r_box_3">
                    <div class="item_text_l">车位总数</div>
                    <div class="item_text_r">
                        <span class="number">{{ data_2['totalNum'] }}</span>
                        <span class="unit">个</span>
                    </div>
                </div>
                <div class="r_box_4">
                    <div class="icon icon_1">
                        <div class="arrow">
                            <svg-icon class="svg-middle" icon-class="car_arrow" />
                        </div>
                        <div class="percent">
                            <el-progress type="circle" :percentage="data_2.rate" :color="bar_color_1"
                                         :stroke-width="strokeWidth" :format="format"></el-progress>
                            <div class="text">车位使用率</div>
                        </div>
                    </div>
                    <div class="icon icon_2">
                        <div class="arrow">
                            <svg-icon icon-class="car_arrow_2"></svg-icon>
                        </div>
                        <div class="percent">
                            <el-progress type="circle" :percentage="data_2.percentage_2" :color="bar_color_2"
                                         :stroke-width="strokeWidth" :format="format"></el-progress>
                            <div class="text">临停车占比</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Tabs from "./Tabs.vue"
import CarArrowsBar from "./CarArrowsBar/index.vue"
import { getParkData_1, getParkData_2 } from "src/api/largeDataScreen";
export default {
    name: "RightParkingData",
    components: { Tabs, CarArrowsBar },
    inject: ['villageId'],
    mounted() {
        this.setIntervalTotalFn()
    },
    destroyed() {
        clearInterval(this.timer);
        this.timer = null;
    },
    data() {
        return {
            bar_color_1: '#FBE5BB',
            bar_color_2: '#77A1EC',
            strokeWidth: 10,
            data_1: {
                totalCount: 0,          // 车辆进出总数        
                longUserTotalCount: 0,  // 长期车进入总数      
                tempUserTotalCount: 0,  // 临时车进入总数
            },
            data_2: {
                totalNum: 0,        // 车位总数
                rate: 0, // 车位使用率
                percentage_2: 0, // 临停车占比
            },
        }
    },
    methods: {
        setIntervalTotalFn() {
            this.timer = null;
            const villageId = this.villageId
            if (villageId) {
                this.getParkData_1(villageId);
                this.getParkData_2(villageId);
                // this.getParkData_3(villageId);
                // return
                this.timer = setInterval(() => {
                    this.getParkData_1(villageId);
                    this.getParkData_2(villageId);
                    // this.getParkData_3(villageId);
                }, 20000);
            }
        },
        getParkData_1(villageId) {
            getParkData_1({ villageId: villageId }).then(res => {
                if (res.success == true) {
                    this.data_1 = {
                        totalCount: res.data.totalCount || 0,
                        longUserTotalCount: res.data.longUserTotalCount || 0,
                        tempUserTotalCount: res.data.tempUserTotalCount || 0,
                        tempUserOutTotalCount: res.data.tempUserOutTotalCount || 0,
                    }
                }
            })
        },
        getParkData_2(villageId) {
            getParkData_2({ villageID: villageId }).then(res => {
                if (res.success == true) {
                    // 临停车占比 = 临时进入 - 临时出去  ）/  车位总数
                    let temRate = (this.data_1.tempUserTotalCount - this.data_1.tempUserOutTotalCount) / res.data.totalNum
                    // console.log('临时22222---》', this.data_1.tempUserTotalCount, this.data_1.tempUserOutTotalCount, res.data.totalNum, temRate)
                    this.data_2 = {
                        totalNum: res.data.totalNum || 0,
                        rate: Number(res.data.rate) || 0,
                        percentage_2: Number(temRate) || 0,
                    }
                }
            }).catch(() => {
                this.data_2 = {
                    totalNum: 0,
                    rate: 0,
                    percentage_2: 0
                }
            })
        },
        format(percent) {
            return String(percent)
        },
    }
}
</script>

<style scoped lang="scss">
.my_content {
    width: 100%;
    height: 100%;

    .content {
        display: flex;
        width: 100%;
        height: 87%;
        font-family: 'OPPOSans';
        font-style: normal;
        font-weight: 400;

        .box_l {
            width: 40%;
            // height: 95%;
            // border: 1px solid #ccc;
            // box-sizing: border-box;
            background: url("../assets/bottom_right_car_border.png") bottom/100% 100% no-repeat;
            margin-top: 0.6rem;
            margin-right: 0.625rem;
            padding: 0 0.625rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .car_text {
                width: 70%;
                text-align: center;
                color: #DDB15C;
                font-size: 0.6rem;
                padding-bottom: 0.3125rem;
                border-bottom: 0.0625rem solid rgba(251, 229, 187, 0.3);
            }

            .car_num {
                width: 70%;
                text-align: center;
                color: #FBE5BB;
                border-bottom: 0.0625rem solid rgba(251, 229, 187, 0.3);
                margin-bottom: 0.625rem;

                // display: flex;
                // align-items: center;
                .car_num_l {
                    font-size: 1.3rem;
                    // flex: 1.7;
                    text-align: right;
                    font-weight: 600;
                    color: #FBE5BB;
                    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);
                }

                .car_num_r {
                    font-size: 0.5rem;
                    // flex: 1;
                    text-align: left;
                    margin-top: 0.25rem;
                    margin-left: 0.25rem;
                }
            }

            .car_box {
                // display: flex;
                width: 100%;
                height: 72%;
                position: relative;

                .car_move {
                    // flex: 1;
                    height: 94%;
                    position: absolute;
                    z-index: 100;

                    .car-arrow-bar {
                        height: 100%;
                    }
                }

                .car_img {
                    // flex: 5;
                    width: 70%;
                    height: 100%;
                    position: absolute;
                    left: 50%;
                    top: 0;
                    transform: translatex(-50%);

                    img {
                        width: 100%;
                        height: 110%;
                        transform: translateY(-4%);
                    }
                }

                .car_move_l {
                    left: 0.9rem;
                    top: 0;
                }

                .car_move_r {
                    right: 0.9rem;
                    top: 0;
                    transform: rotateX(180deg);
                }
            }
        }

        .box_r {
            width: 60%;
            height: 100%;
            // border: 1px solid #ccc;
            // box-sizing: border-box;
            display: flex;
            flex-direction: column;
            font-family: 'OPPOSans';
            font-style: normal;
            font-weight: 400;
            color: #FBE5BB;

            .r_box_item {
                flex: 1;
                // border: 1px solid #ccc;
                // box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .item_text_l {
                    font-size: 0.6rem;
                }

                .item_text_r {

                    // display: flex;
                    // align-items: center;
                    .number {
                        font-size: 1.3rem;
                        font-weight: 600;
                        text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);
                    }

                    .unit {
                        margin-left: 0.125rem;
                        font-size: 0.5rem;
                        align-self: flex-end;
                    }
                }
            }

            .r_box_4 {
                // border: 1px solid #ccc;
                // box-sizing: border-box;
                display: flex;
                flex: 4;
                align-items: center;
                flex-direction: row;

                .icon {
                    width: 100%;
                    height: 100%;
                    flex: 1;
                    // border: 1px solid #ccc;
                    // box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    padding-bottom: 1rem;

                    .percent {
                        width: 70%;
                        height: 90%;
                        margin-left: 1rem;

                        .text {
                            text-align: center;
                            font-size: 0.6rem;
                            margin-top: -0.8rem;
                        }
                    }
                }

                .icon_1 .percent {
                    background: url("../assets/park_circle_1.png") center/contain no-repeat;

                    .text {
                        color: #FBE5BB;
                    }
                }

                .icon_2 .percent {
                    background: url("../assets/park_circle_2.png") center/contain no-repeat;

                    .text {
                        color: #D2E2FF;
                    }
                }
            }
        }
    }
}

:deep .r_box_4 .el-progress {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-progress-circle {
        width: 76% !important;
        // height: 70% !important;
        display: flex;
        align-items: center;

        .el-progress-circle__track {
            stroke: #241B09;
        }
    }
}

:deep .r_box_4 {
    .icon_1 {
        .el-progress__text {
            font-size: 1.5rem !important;
            color: #FBE5BB;
            font-weight: 600;
            text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);
        }
    }

    .icon_2 {
        .el-progress__text {
            font-size: 1.5rem !important;
            color: #77A1EC;
            font-weight: 600;
            text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);
        }

        .svg-icon {
            color: #77A1EC;
        }
    }

    .arrow .svg-icon {
        font-size: 0.75rem;
    }
}
</style>